{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<div class="box is-fullwidth is-sideless is-flex-between is-shadowless" data-test-cta-container>
  {{#if this.version.isEnterprise}}
    <p>
      Sync secrets to platforms and tools across your stack to get secrets when and where you need them.
      <Hds::Link::Standalone
        @icon="learn-link"
        @text="Secrets sync tutorial"
        @href={{doc-link "/vault/tutorials/enterprise/secrets-sync"}}
        data-test-cta-doc-link
      />
    </p>
  {{else}}
    <p>
      This enterprise feature allows you to sync secrets to platforms and tools across your stack to get secrets when and
      where you need them.
    </p>
    <Hds::Button
      @text="Learn more about secrets sync"
      @icon="docs-link"
      @iconPosition="trailing"
      @isHrefExternal={{true}}
      @href={{doc-link "/vault/tutorials/enterprise/secrets-sync"}}
      data-test-cta-doc-link
    />
  {{/if}}
</div>

<div class="is-flex-row has-gap-l has-bottom-margin-m">
  <div>
    <img src={{img-path "~/sync-landing-1.png"}} alt="Secrets sync destinations diagram" aria-describedby="sync-step-1" />
    <p id="sync-step-1" class="has-top-margin-m">
      <b>Step 1:</b>
      Create a destination, and set up the connection details to allow Vault access.
    </p>
  </div>
  <div>
    <img src={{img-path "~/sync-landing-2.png"}} alt="Syncing secrets diagram" aria-describedby="sync-step-2" />
    <p id="sync-step-2" class="has-top-margin-m">
      <b>Step 2:</b>
      Select secrets from your KV v2 engine and sync secrets to your destination.
    </p>
  </div>
</div>